.super_details {
  background: #f8f8f8;
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-direction: column;
  justify-content: space-between;
}

.super_details .user_info {
  padding: rem(22) rem(22);
  background: #fff;
  display: flex;
  flex-direction: row;
  border-top: 1px solid #f8f8f8;
}

.user_info .user_info_img {
  height: rem(80);
  width: rem(80);
}

.user_info .user_info_img .img {
  height: rem(80);
  width: rem(80);
  display: block;
}

.user_in {
  margin-left: rem(20);
  padding-top: rem(4);
}

.user_in .user_name {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.user_in .user_name .name {
  height: rem(40);
  line-height: rem(40);
  font-size: rem(28);
  color: #000;
  max-width: rem(450);
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.user_in .user_name .lev {
  width: rem(100);
  height: rem(31);
  margin-left: rem(15);
}

.user_in .user_name .lev .img {
  width: rem(100);
  height: rem(31);
  display: block;
}

.user_in .vip_tips {
  color: #999;
  font-size: rem(24);
  height: rem(33);
  line-height: rem(33);
  margin-top: rem(2);
}

.super_details .super_panel {
  width: rem(690);
  height: rem(705);
  background: rgba(255, 255, 255, 1);
  border-radius: rem(15);
  margin: rem(23) auto;
}
.super_details .super_title {
  text-align: center;
  font-size: rem(30);
  color: #000;
  padding: rem(30);
}

.super_list .super_item {
  margin-left: rem(30);
  margin-right: rem(30);
  display: inline-block;
}

.super_list .super_scroll {
  white-space:nowrap; width: auto;
  -webkit-overflow-scrolling: touch; //有回弹效果
  overflow: scroll; height: rem(140);
  &::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

.super_list .super_item .super_img {
  height: rem(89);
  width: rem(88);
  margin: auto;
}

.super_list .super_item .super_img .img {
  height: rem(88);
  width: rem(88);
  display: block;
  margin: auto;
}

.super_list .super_item .super_txt {
  font-size: rem(24);
  color: #999;
  margin-top: rem(10);
  text-align: center;
}

.super_bg {
  margin: rem(40) rem(30) rem(30); width: rem(630); height: rem(300);
  background: url($imgPath+'/member/payment_vip/198_bg.png') no-repeat top center;
  background-size: 100% 100%; text-align: center;
  p {
    font-size: rem(34); color: #F3E5CA;
    padding-top: rem(50);
    &:before {
      content: ""; display: inline-block; width: rem(42); height: rem(24);
      background: url($imgPath+'/member/payment_vip/super_left.png') no-repeat center;
      background-size: 100% 100%; margin-right: rem(30);
    }
    &:after {
      content: ""; display: inline-block; width: rem(42); height: rem(24);
      background: url($imgPath+'/member/payment_vip/super_right.png') no-repeat center;
      background-size: 100% 100%; margin-left: rem(30);
    }
  }
  h3 {
    font-size: rem(88); color: #F3E5CA; padding-top: rem(30);
    span { font-size: rem(34); }
  }
}


.super_tips {
  font-size: rem(22);
  color: #666;
  height: rem(64);
  width: rem(582);
  margin: auto;
  background: rgba(248, 248, 248, 1);
  border-radius: rem(15);
  padding-left: rem(52);
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

.super_tips .img {
  position: absolute;
  height: rem(24);
  width: rem(24);
  left: rem(13);
  top: rem(20);
}
.super_bottom_tips {
  padding: 0 rem(100);
  ul {
    text-align: left; font-size: rem(22);
    color: #999; list-style-type: disc;
    li {padding-bottom: rem(10);}
  }
}
.bottom .pact_read {
  font-size: rem(22); text-align: center;margin-bottom: rem(34);
}
.pact_read span {
  color: #4C91E2;
  text-decoration:underline;
}
.bottom .pay_btn {
  height: rem(100);
  line-height: rem(100); text-align: center; font-size: rem(34);
  background: linear-gradient(90deg, rgba(245, 231, 202, 1) 0%, rgba(221, 195, 146, 1) 100%);
}
